<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #canvas{
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="300" height="300"></canvas>

  <script>

   //绘制头像之间的线
    const drawLine = (ctx,{beginX,beginY},{x,y})=>{
      ctx.beginPath();
    //绘制起始点
      ctx.moveTo(beginX,beginY);
      //经过的某个位置
      ctx.lineTo(x, y);
      ctx.lineWidth = 1
      ctx.strokeStyle = "#d3d3d3";
      ctx.setLineDash([5,5,5]);
      //挥着路径
      ctx.stroke();
    }




    //x,y 为绘制圆的中心点  r圆的半径
    const circleImg=(ctx, img, x=15, y=15, r=15)=> {
        ctx.beginPath()
        ctx.save();
        var d =2 * r;
        var cx = x + r;
        var cy = y + r;
        ctx.arc(cx, cy, r, 0, 2 * Math.PI);
        ctx.clip();
        ctx.drawImage(img, x, y, d, d);
        ctx.restore();
    }

    //绘制单个头像
    const drawImg = (ctx,{url,x,y})=>{
      let img = new Image();
      img.src = url
      img.onload = function() {
        circleImg(ctx,img,x,y)
      }
    }


    const drawCanvas = (shareImg, otherImgArr=[],canvasDom)=>{
      const imgRadius = 15 //图片半径  自行更改
      const {width,height} = canvasDom
      const averageHeight = Math.floor(height/3) // 根据domheight均分 确定头像应该存在的高度位置
      console.log(width,height,averageHeight);
      const ctx = canvasDom.getContext("2d");
      console.log(ctx);
      if(otherImgArr.length==3){
        //外环
        let img2 = new Image();
        img2.src = './2.png'
        img2.onload = function() {
          ctx.drawImage(img2, width/2-15*2,averageHeight-imgRadius*2-9,60,50);
        }
      }
      drawImg(ctx,{url:shareImg,x:width/2-15,y:averageHeight-imgRadius*2})
      
      const drawImgArr = otherImgArr.map((item,index,arr)=>{
        if(arr.length==1) return {url:item,x:width/2-15,y:averageHeight*2}
        if(arr.length==2) return {url:item,x:width/3*(index+1)-15,y:averageHeight*2}
        if(arr.length==3) return {url:item,x:width/4*(index+1)-15,y:averageHeight*2}
      })
      drawImgArr.forEach(item=>{
        drawImg(ctx,item)
        drawLine(ctx,{beginX:width/2,beginY:averageHeight},{x:item.x+15,y:item.y})
      })
    }

    // 分享人头像
    const shareImg = './1.jpg'
    let otherImgArr = ['./1.jpg','./1.jpg','./1.jpg','./1.jpg','./1.jpg']
    //后面的concat是... 带省略号的头像图片
    if(otherImgArr.length>2)otherImgArr = otherImgArr.splice(0,2).concat(['./2.png'])
    drawCanvas(shareImg,otherImgArr,canvas)
  </script>
</body>
</html>